<template>
    <div class="main-box">
        <!-- <el-form ref="form" :model="form" label-width="95px">
			<el-row>
				<el-col :span="4">
                    <el-form-item label="O-项目目标">
                        <el-select v-model="form.target" clearable placeholder="请选择O-项目目标" @change="targetChange">
                            <el-option :label="op.krResult" :value="op.id" v-for="(op,index) of targetOptionsList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
				</el-col>
                <el-col :span="4">
                    <el-form-item label="KR-关键结果">
                        <el-input v-model="form.source" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="团队状态">
                        <el-select v-model="form.status" clearable placeholder="请选择团队状态">
                            <el-option label="状态一" value="1"></el-option>
                            <el-option label="状态二" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="重要事项">
                        <el-input v-model="form.sx" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="开始时间">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="结束时间">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
			</el-row>
        </el-form> -->
        <div class="left bgwhite">
            <el-row :gutter="10">
                <el-col :span="12">
                    <avue-crud ref="crudSource" :data="dataSourceList" :table-loading="dataListLoading"
                        :option="tableOption"  @selection-change="selectionSourceChange"
                        @row-save="sourceRowSave" @row-click="handleSourceRowClick"  @refresh-change="refreshChange">
                        <template slot="menuLeft">
                            <el-button type="danger" @click="deleteHandle(1)" size="small">批量删除</el-button>
                        </template>
                    </avue-crud>
                </el-col>
                <el-col :span="12">
                    <avue-crud ref="crud" :data="dataPlanList" :table-loading="dataListLoading"
                        :option="tablePlanOption"  @selection-change="selectionPlanChange"
                        @row-save="planRowSave">
                        <template slot="menuLeft">
                            <el-button type="danger" @click="deleteHandle(2)" size="small">批量删除</el-button>
                        </template>
                    </avue-crud>
                </el-col>
                <el-col :span="12" style="margin-top: 20px;">
                    <avue-crud ref="crud" :data="dataSolveList" :table-loading="dataListLoading"
                        :option="tableSolveOption"  @selection-change="selectionSolveChange"
                        @row-save="solveRowSave">
                        <template slot="menuLeft">
                            <el-button type="danger" @click="deleteHandle(3)" size="small">批量删除</el-button>
                        </template>
                    </avue-crud>
                </el-col>
                <el-col :span="12" style="margin-top: 20px;">
                    <avue-crud ref="crud" :data="dataBGPlanList" :table-loading="dataListLoading"
                        :option="tableBGPlanOption"  @selection-change="selectionBGPlanChange"
                        @row-save="bGPlanRowSave">
                        <template slot="menuLeft">
                            <el-button type="danger" @click="deleteHandle(4)" size="small">批量删除</el-button>
                        </template>
                    </avue-crud>
                </el-col>
            </el-row>

        </div>
        <!-- <div class="fenge"></div>
        <div class="right bgwhite">
            <el-row :gutter="10">
                <avue-crud ref="crud" :data="dataSolvePlanList" :table-loading="dataListLoading"
                    :option="tableSolvePlanOption" :page="page" @search-change="searchChange" @on-load="getDataList"
                    @refresh-change="refreshChange">
                    <template slot="menuLeft">
                        <el-button type="primary" icon="el-icon-edit" size="small"
                            @click.stop="updateDayWorkInfo">更新复盘计划</el-button>
                        <el-button type="primary" icon="el-icon-edit" size="small"
                            @click.stop="addDialog">新增考核信息</el-button>

                    </template>
                </avue-crud>
            </el-row>
        </div> -->
        <!-- <AddPlan ref="addPlan" @refreshDataList="getDataList(page)"></AddPlan> -->
    </div>
</template>

<script>
import { tableOption } from '@/crud/manage/resource'
import { tablePlanOption } from '@/crud/manage/plan'
import { tableSolveOption } from '@/crud/manage/solve'

import { tableBGPlanOption } from '@/crud/manage/bg-plan'
export default {
 
    data() {
        return {
            addPlanVI: false,
            form: {
                target: "",
                source: "",
                status: "1",
                sx: "",
                date1: "",
                date2: ""
            },
            targetOptionsList: [],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            dataSourceChoose: null,
            dataSourceListSelections: [],
            dataPlanListSelections: [],
            dataSolveListSelections: [],
            dataBGPlanListSelections: [],
            dataSourceList: [],
            dataPlanList: [],
            dataSolveList: [],
            dataSolvePlanList: [

            ],
            dataBGPlanList: [],
            dataListLoading: false,
            tableOption: tableOption,
            tablePlanOption: tablePlanOption,
            tableSolveOption: tableSolveOption,
            tableBGPlanOption: tableBGPlanOption
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
   
      
        onSubmit() {
            console.log('submit!');
        },
        targetChange(e) {
            console.log('🚀 ~ e', e)
            this.getSourceDataList(this.page)
        },
        initData() {
            this.$http({
                url: this.$http.adornUrl('/crm/okr/pageOkrMain'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: 1,
                    size: 1000
                }, {
                    projectObject: ""
                }))
            }).then(({ data }) => {
                this.targetOptionsList = data.obj.records;
                this.form.target = this.targetOptionsList[0].id;
                this.getSourceDataList(this.page);
                console.log('🚀 ~ this.form.target', this.form.target)
            })
        },
        getDataList(page, params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/month/plan/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params))
            }).then(({ data }) => {
                this.page.total = data.obj.total;
                this.dataSolvePlanList = data.obj.records
                this.dataListLoading = false
                if (done) {
                    done()
                }
            })
        },
        // =========================  关键结果  =============================
        getSourceDataList(page, params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/okr/pageOkrKr'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: 9999
                }, {
                    okrMainId: this.form.target
                }))
            }).then(({ data }) => {
                this.dataSourceList = data.obj.records
                this.$refs.crudSource.setCurrentRow(this.dataSourceList[0])
                this.dataSourceChoose = this.dataSourceList[0];
                this.page.total = data.total
                this.dataListLoading = false
                this.getPlanDataList(this.page)
                this.getSolveDataList(this.page)
                this.getBGPlanDataList(this.page)
                if (done) {
                    done()
                }
            })
        },
        selectionSourceChange(val) {
            this.dataSourceListSelections = val;
        },
        sourceRowSave(form, done, loading) {
            this.$http({
                url: this.$http.adornUrl('/crm/okr/addOkrKr'),
                method: 'post',
                data: this.$http.adornData({
                    okrMainId: this.form.target,
                    krDesc: form.krDesc
                })
            }).then(({ data }) => {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                        this.getSourceDataList(this.page)
                    }
                })
            })
        },
        handleSourceRowClick(row, event, column) {
            this.dataSourceChoose = row;
            this.getPlanDataList(this.page)
            this.getSolveDataList(this.page)
            this.getBGPlanDataList(this.page)
        },
        deleteHandle(type) {
            console.log('🚀 ~ this.dataSourceListSelections', this.dataSourceListSelections)
            let ids = [];
            if (type === 1) {
                this.dataSourceListSelections.forEach((i) => {
                    ids.push(i.id)
                })
            }
            if (type === 2) {
                this.dataPlanListSelections.forEach((i) => {
                    ids.push(i.id)
                })
            }
            if (type === 3) {
                this.dataSolveListSelections.forEach((i) => {
                    ids.push(i.id)
                })
            }
            if (type === 4) {
                this.dataBGPlanListSelections.forEach((i) => {
                    ids.push(i.id)
                })
            }
            this.$confirm(`确定进行批量删除操作?`, '友情提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl(`/crm/okr/deleteOkrInfo`),
                        method: 'delete',
                        data: this.$http.adornData({
                            type: type,
                            ids: ids
                        }, false)
                    }).then(({ data }) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getSourceDataList(this.page)
                            }
                        })
                    })
                })
                .catch(() => { })
        },
        // =========================  解决方案  =============================
        getSolveDataList(page, params, done) {
            console.log('11111111page:', page);
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/okr/pageOkrSolution'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: 9999
                }, {
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id
                }))
            }).then(({ data }) => {
                this.dataSolveList = data.obj.records
                this.page.total = data.total
                this.dataListLoading = false
                if (done) {
                    done()
                }
            })
        },
        solveRowSave(form, done, loading) {
            console.log('🚀 ~ form', form)
            this.$http({
                url: this.$http.adornUrl('/crm/okr/addOkrSolution'),
                method: 'post',
                data: this.$http.adornData({
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id,
                    solutionDesc: form.solutionDesc
                })
            }).then(({ data }) => {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                        this.getSolveDataList(this.page)
                    }
                })
            })
        },
        selectionSolveChange(val) {
            this.dataSolveListSelections = val;
        },
        // =========================  措施方案  =============================
        getPlanDataList(page, params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/okr/pageOkrResmeasure'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: 9999
                }, {
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id
                }))
            }).then(({ data }) => {
                this.dataPlanList = data.obj.records
                this.page.total = data.total
                this.dataListLoading = false
                if (done) {
                    done()
                }
            })
        },
        planRowSave(form, done, loading) {
            console.log('🚀 ~ form', form)
            this.$http({
                url: this.$http.adornUrl('/crm/okr/addOkrResmeasure'),
                method: 'post',
                data: this.$http.adornData({
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id,
                    resmesureDesc: form.resmesureDesc
                })
            }).then(({ data }) => {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                        this.getPlanDataList(this.page)
                    }
                })
            })
        },
        selectionPlanChange(val) {
            this.dataPlanListSelections = val;
        },
        // =========================  解决方案  =============================
        getBGPlanDataList(page, params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/okr/pageOkrPessimism'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: 9999
                }, {
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id
                }))
            }).then(({ data }) => {
                this.dataBGPlanList = data.obj.records
                this.page.total = data.total
                this.dataListLoading = false
                if (done) {
                    done()
                }
            })
        },
        bGPlanRowSave(form, done, loading) {
            console.log('🚀 ~ form', form)
            this.$http({
                url: this.$http.adornUrl('/crm/okr/addOkrPessimism'),
                method: 'post',
                data: this.$http.adornData({
                    mainId: this.form.target,
                    krId: this.dataSourceChoose.id,
                    pessimismDesc: form.pessimismDesc
                })
            }).then(({ data }) => {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                        this.getBGPlanDataList(this.page)
                    }
                })
            })
        },
        selectionBGPlanChange(val) {
            this.dataBGPlanListSelections = val;
        },
        /**
         * 刷新回调
         */
        refreshChange() {
            this.getDataList(this.page)
        },
        searchChange(params, done) {
            this.getDataList(this.page, params, done)
        },
        refreshSourceChange() {
            this.getSourceDataList(this.page)
        },
        searchSourceChange(params, done) {
            this.getSourceDataList(this.page, params, done)
        },
    }
}
</script>

<style lang="scss" scoped>
.fenge {
    height: 10px;
    width: 100%;
}

.main-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

//.left{
//    height: 300px;
//}
//.right{
//    height: calc(100% - 360px);
//}</style>
